<template>
  <div class="content">
    <div >
      <img src="@/assets/images/policy/policy-top.jpg" style="width:100%;">
    </div>
    <div class="position-search-content">
      <div class="input-block">
        <input v-model="searchKeyWord" type="text" placeholder="请输入关键字"/>
        <router-link :to="{name:'policyList',query:{keyword:searchKeyWord}}" class="btn2 search-btn">搜索</router-link>
      </div>
      <div class="hot-block">
        相关搜索：
        <div @click="searchKeyWord=item" v-for="(item,index) in hot" class="hot-item">{{ item }}</div>
      </div>
    </div>
    <div class="block search-content-in">
      <div class="content-in-option">
        <img src="@/assets/images/policy/just.png" class="in-illustration">
          <div class="in-option-text">
            <p class="option-text-title">瓜州市有哪些政策？</p>
            <p class="option-text-content">了解瓜州市整体产业环境、证件办理、人才与企业扶持等相关人才政策。</p>
            <router-link :to="{name:'policyList',query: {type: 1,zcType: 1}}">
            <div class="btn2 option-btn">查看更多</div>
            </router-link>
          </div>
      </div>
      <div class="content-in-option">
        <img src="@/assets/images/policy/back.png" class="in-illustration">
        <div class="in-option-text">
          <p class="option-text-title">我能享受什么政策？</p>
          <p class="option-text-content">可根据您的身份及需求，为您个性化推荐您可能适用的人才政策。</p>
          <div class="btn2 option-btn" @click="getUserPolicyInfo">查看更多</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import {getUserPolicyInfoApi} from "@/api/userPolicyInfo";
import {mapGetters} from "vuex";

export default {
  name: "JobCareers",
  data() {
    return {
      hot: ['人才引进', '就业创业', '公务员', '培训补贴'],
      searchKeyWord: ''
    }
  },
  methods:{
    getUserPolicyInfo() {
      getUserPolicyInfoApi().then((res) => {
        console.log(res)

          var toUrl='';
          if(this.identity==2)
          {
            toUrl = '/policyList?type=5&zcType=2';
          }else{
            if(res === 1)
            {
              toUrl = '/policyList?type=5&zcType=2';
            }else{
              toUrl = '/policyInfo';
            }
          }
          this.$router.push({path: toUrl })


      }).catch((res) => {
        console.log(res)
      })
    },
  },
  computed:{
    ...mapGetters(['user', 'identity'])
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.block {
  width: $contentWidth;
  margin: 0 auto;
  margin-top: 16px;
  min-height: $fullMinHeight;
}
.content{
   background-color: #F6F6F6;
  .search-content-in{
    height: 360px;
    padding-top: 50px;
    display: flex;
  .content-in-option{
    margin-left: 40px;
    display: flex;
    background-color: #FFFFFF;
    height: 225px;
    width: 570px;
    border-radius: 10px;

    .in-illustration{
      width: 125px;
      height: 125px;
      margin: 45px 0 0 45px;
    }
    .option-btn{
      height: 30px;
      width: 120px;
      margin: 20px 0 0 55%;
    }
    .in-option-text{
      padding: 30px 0 0 30px;
      .option-text-title{
        color: #D74260;
        font-size: 22px;

      }
      .option-text-content{
        padding: 20px 60px 0 0;
        font-size: 17px;
        line-height:200%;
      }
    }
  }
  }
  .position-search-content {
    width: 100%;
    margin-top: 0;
    height: 150px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .input-block {
      width: 900px;
      height: 55px;
      box-shadow: 3px 5px 15px 0 rgb(0 0 0 / 10%);
      border-radius: 30px;
      padding: 6px 0;
      display: flex;
      flex-direction: row;
      align-items: center;

      input {
        width: calc(100% - 110px);
        height: 100%;
        display: flex;
        align-items: center;
        background: none;
        padding: 0 20px;
        font-size: 18px;
      }

      .search-btn {
        width: 100px;
        height: 100%;
      }
    }

    .hot-block {
      width: 900px;
      display: flex;
      margin-top: 20px;
      flex-direction: row;
      color: $darkGray;
      font-size: 17px;
      padding-left: 10px;

      .hot-item {
        color: $darkGray;
        margin: 0 15px;
        cursor: pointer;
      }
    }
  }

}


</style>
